<template>
    <basic-container :btnFlag = true>
        <div class="card-border">
            <process-view-simple-planning-register :active="stageActive"/>
            <card-header :header-data="headerData"></card-header>
            <el-tabs class="bs-tab"
                     v-model="activeName"
                     type="card">
                <el-tab-pane label="申请信息"
                             name="first">
                    <register-detail :id="businessKey"></register-detail>
                </el-tab-pane>
                <el-tab-pane label="办理情况"
                             name="second">
                    <process-handle-history :processId="processId" :business-key="businessKey" :process-key="processKey"></process-handle-history>
                </el-tab-pane>
                <el-tab-pane label="会商意见"
                             name="third">
                    <el-tabs v-model="topicActiveName" style="padding: 12px;margin-top:20px;" v-if="msgFlag">
                        <el-tab-pane
                                :label="item.deptName"
                                :name="String(item.topicId)"
                                v-for="(item,index) in msgList"
                                :key="index">
                            <msg-nobtn :msg-data="msgDataListTemp"></msg-nobtn>
                            <el-pagination
                                    @size-change="sizeChange"
                                    @current-change="onLoad"
                                    :current-page="pageTemp.currentPage"
                                    :page-size="pageTemp.pageSize"
                                    :total="pageTemp.total"
                                    :page-sizes="[10, 20, 30, 40 ,50 ,100]"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    v-if="msgDataListTemp.length>0"
                                    class="paginationcss">
                            </el-pagination>
                            <div v-if="msgDataListTemp.length<=0" style="text-align: center;
          font-size: 18px;
          margin-top: 28px;">暂无数据</div>
                        </el-tab-pane>
                    </el-tabs>
                    <div v-if="!msgFlag" style="text-align: center;font-size: 18px;margin-top: 20px;">
                        暂无数据</div>
                </el-tab-pane>
                <el-tab-pane label="会办流程"
                             name="fourth">
                  <div v-for="item in jointlyHandleList" v-if="jointlyHandleList != null">
                    <jointly-handle-div v-if="item.processId != null"
                                        type="JOINTLY_HANDLE_TYPE_REGISTER_FGW"
                                        :business-key="$route.params.id"
                                        :process-id="item.processId">
                    </jointly-handle-div>
                  </div>
                </el-tab-pane>
            </el-tabs>
            <assign-history :visible="assignHisVisible" :taskAssigneeHisList="taskAssigneeHisList" @cancelAssignHis="cancelAssignHis"></assign-history>
        </div>
    </basic-container>
</template>
<script>
    import {PROJECT_DIC} from '@/const/dict'
    import {projectRegister,projectDetail,historyTask} from "@/api/planning/project";
    import {messagePage} from '@/api/planning/message'
    import chatMsg from '@/components/bostech/chat-msg'
    import getDetailData from "@/mixins/getDetailData";
    import { mapGetters } from "vuex"
    import {getfileinfopage} from "@/api/system";
    import MsgNobtn from "../../../components/bostech/msg-nobtn";
    import registerDetail from "@/components/registerinfo/registerDetail"
    import processHandleHistory from "@/components/activiti/history/processHandleHistory";
    import processViewSimplePlanningRegister from '@/components/activiti/process-view/simple/planning-register'
    import jointlyHandleDiv from "@/components/activiti/jointly-handle-button/jointlyHandleDiv";
    import {pageProcess} from '@/api/activiti/monitor';



    let stageMap = {
        'A':0,
        'B':1,
        'C':2,
        'D':3,
        'E':5,
        'F':6,
        'G':6,
        'H':8,
        'I':9
    };
    export default {
        name: "tagReply",
        mixins: [getDetailData()],
        components: {
            MsgNobtn,
            chatMsg,
            registerDetail,
            processHandleHistory,
            jointlyHandleDiv,
            processViewSimplePlanningRegister
        },
        watch: {
            'topicActiveName'(val) {
                this.topicIdTemp = val;
                this.onLoadFortabs();
            }
        },
        data() {
            return {
                headerData:{
                    title:'规划详情'
                },
                msgListTemp:[],
                stageActive:1,// 步骤标志
                //办理情况数据
                applyData: [],
                // 办理情况属性
                applyOption: {
                    page:true,
                    menu: false,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    indexWidth:70,
                    cellBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    filterBtn: false,
                    searchBtn: false,
                    keyId: "id",
                    column: [
                        {
                            label: "用户",
                            width: 240,
                            prop: "assigneeNickname",
                            cell: true
                        },
                        {
                            label: "环节",
                            prop: "taskName",
                            cell: true,
                        },
                        {
                            label: "结果",
                            prop: "opinion",
                            cell: true
                        },
                        {
                            label: "操作时间",
                            prop: "date",
                            cell: true
                        },
                        {
                            label: "转办历史",
                            prop: "taskAssigneeHisList",
                            width:120,
                            cell: true,
                            slot: true,
                        }
                    ]
                },
                detailData:[],
                msgList:[],
                msgFlag:false,
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                pageTwo: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                tableLoading: false,
                multipleFiles:[],

                pageTemp: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                pageSizeTemp:10,
                currentTemp:1,
                activeName: "first",
                topicActiveName: null,
                topicIdTemp:0,
                msgDataListTemp:[],
                cssbeian:false,
                assignHisVisible:false,
                taskAssigneeHisList:[],
                businessKey: null,
                processKey: 'planning-register',
                processId: null,
                jointlyHandleList:null,
            };
        },
        created(){
            this.getDetailData();
            this.businessKey = this.$route.params.id;
            this.processId = this.$route.query.processId;
            this.getJointlyHandleList()
        },
        computed: mapGetters([
            "userInfo"
        ]),
        methods: {
            getJointlyHandleList(){
              console.log("registerinfoId:"+this.$route.params.id)
              pageProcess(Object.assign({
                current:1,
                size:-1,
                filterByAdminRole: false,
                businessKey:this.$route.params.id,
                processKey:'planning-register-fgw'
              })).then(response =>{
                if(response.data.code == 0){
                  this.jointlyHandleList = response.data.data.records
                }
              })
            },
            goBack() {
                this.$router.go(-1);
            },
            handleChange(val) {
            },
            // 获取详情信息
            getDetailData(){
                projectDetail(this.$route.params.id).then(response => {
                    this.getResultDetail(response);
                })
            },
            async  getResultDetail(response){

                if(response.data.code == '0') {
                    let records = response.data.data;
                    if(records.fileId!="" && records.fileId !=null) {
                        this.multipleFiles = [];
                        this.multipleFiles = await this.getFileInfoPageTemp(records);
                    }
                    this.stageActive = stageMap[records.stage];
                    if ((records.planningRank == 'C' || records.planningRank == 'B') && records.stage == 'H') {
                        this.stageActive = 5;
                        this.cssbeian = true;
                    }

                    this.getDetailDataMins(records);
                    if(records.registerinfoTopicVOList.length>0){
                        this.msgFlag = true;
                        for(let i in records.registerinfoTopicVOList){
                            this.getMessage(records.registerinfoTopicVOList[i],i);
                        }
                    }
                }
            },
            getFileInfoPageTemp(records){
                return new Promise((resolve, reject) => {
                    if(records.fileId!="" && records.fileId !=null){
                        getfileinfopage(Object.assign({
                            current: 1,
                            size: 100,
                            fileIds:records.fileId
                        })).then(response => {
                            let multipleFiles = response.data.data.records;
                            resolve(multipleFiles);
                        }).catch(
                        )
                    }
                })
            },
            getMessage(obj,item){
                //默认得到第一个数据
                if (item == 0) {
                    messagePage(Object.assign({
                        current: 1,
                        size: 10,
                        topicId: obj.topicId,
                        ascs: 'send_time'
                    })).then(response => {
                        if (response.data.code == 0) {
                            let record = response.data.data.records;
                            let pageTemp = {};
                            pageTemp.currentPage = response.data.data.current;
                            pageTemp.pageSize = response.data.data.size;
                            pageTemp.total = response.data.data.total;
                            this.topicActiveName = String(obj.topicId); //tabs默认显示第一个部门
                            this.topicIdTemp = obj.topicId;
                            this.pageTemp = pageTemp;

                            this.putList(record, obj.deptName, obj.topicId, this.pageTemp);
                        }
                    });
                } else {
                    let record = null;
                    this.putList(record, obj.deptName, obj.topicId, this.pageTemp);
                }

            },
            putList(record,deptName,topicId,pageTemp){
                this.msgListTemp=[];

                if(record!=null){
                    this.recursive(record);    //递归消息放入消息列msgListTemp中
                }

                let msgMap = {
                    deptName:deptName,
                    msgDataList:this.msgListTemp,
                    topicId:topicId,
                    pageTemp:pageTemp,
                };
                if(record!=null){
                    this.msgDataListTemp = msgMap.msgDataList;
                }

                this.msgList.push(msgMap)
            },
            recursive(record,deptName){
                for(let i in record){
                    let flag = false;
                    if(record[i].senderId == this.userInfo.userId){
                        flag = true
                    }
                    let msgDataMap = {
                        orgName:record[i].senderNickname,
                        nickName:record[i].senderNickname?record[i].senderNickname.substring(0,2):'',
                        msgTime:record[i].sendTime,
                        msgContent:record[i].content,
                        replyFlag:flag,
                        senderId:record[i].senderId,
                        topicId:record[i].topicId,
                        messageId:record[i].messageId,
                        rightaway: record[i].parentId !== null?1:0,
                        fileId:record[i].fileId,
                        filenametemp:record[i].fileFullName,
                    };
                    this.msgListTemp.push(msgDataMap);
                    if(record[i].children!==null){ //当还有子消息时继续递归
                        this.recursive(record[i].children);
                    }
                }
            },
            //当点击显示第几页时触发
            onLoad(page){
                this.currentTemp=page;
                messagePage(Object.assign({
                    current: page,// 当前页数
                    size: this.pageSizeTemp,// 每页显示多少条
                    topicId:this.topicIdTemp,
                    ascs:'send_time'
                })).then(response => {
                    if (response.data.code == 0) {
                        let record = response.data.data.records;
                        this.putList(record);
                    }
                })
            },
            //当每页显示的条数改变时触发
            sizeChange(page){
                messagePage(Object.assign({
                    current: 1,// 当前页数
                    size: page,// 每页显示多少条
                    topicId:this.topicIdTemp,
                    ascs:'send_time'
                })).then(response => {
                    if (response.data.code == 0) {
                        let record = response.data.data.records;
                        this.putList(record);
                    }
                })
            },
            onLoadFortabs(){
                messagePage(Object.assign({
                    current: 1,// 当前页数
                    size: 10,// 每页显示多少条
                    topicId:this.topicIdTemp,
                    ascs:'send_time'
                })).then(response => {
                    if (response.data.code == 0) {
                        let record = response.data.data.records;
                        this.pageTwo.currentPage = response.data.data.current;
                        this.pageTwo.pageSize = response.data.data.size;
                        this.pageTwo.total = response.data.data.total;
                        this.pageTemp = this.pageTwo;
                        this.putListForpage(record);
                    }
                })
            },
            putListForpage(record){
                this.msgListTemp=[];
                if(record!=null){
                    this.recursive(record);    //递归消息放入消息列msgListTemp中
                }
                if(record!=null){
                    this.msgDataListTemp = this.msgListTemp;
                }
            },
            taskAssigneeHisView(row){
                this.assignHisVisible = true;
                this.taskAssigneeHisList = row.taskAssigneeHisList
            },
            cancelAssignHis(){
                this.assignHisVisible = false;
            }



        }
    };
</script>
<style lang="scss" scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }

    .box-card {
        margin-top: 20px;
        width: 480px;
    }
    .head-title {
        color: rgb(2, 2, 2);
        text-align: left;
        display: inline;
        font-weight: 600;
    }
    .collapse-title{
        font-size:1rem;
    }
    .head-explain {
        color: #333;
        text-align: left;
        display: inline;
        font-size: 14px;
        font-weight: 600;
    }
    .form-group {
        padding: 20px;
    }
    .form-label {
        font-weight: 600;
        display: inline-block;
        width: 140px;
    }
    .collapse-header {
        display: inline-block;
        width: 94%;
    }

    .consult-button {
        margin: 2rem 0;
        text-align: center;
    }

    .chatbox {
        height: 500px;
        width: 100%;
        border: 1px solid #d2d2d2;
        border-width: 1px 0;
        overflow-y: auto;
        padding-bottom: 30px;
    }
    .paginationcss{
        margin-top: 20px;
        float: right;
        margin-right: 28px;
    }
</style>
